<template>
  <li :class="subMenuClass">
    <a href="javascript:void(0)" @click="click">
      <i :class="icon"></i>
      <span>{{label}}</span>
      <span class="pull-right-container">
        <i class="fa fa-angle-left pull-right"></i>
      </span>
    </a>
    <ul class="treeview-menu">
      <slot></slot>
    </ul>
  </li>
</template>

<script>
  import {ADD_CURRENT_MENU, REMOVE_CURRENT_MENU, CLEAR_CURRENT_MENUS} from "../../store/mutationTypes"

  export default {
    name: "SubMenu",
    props: {
      label: {
        type: String,
        required: true
      },
      icon: {
        type:String,
        default:"fa fa-circle-o"
      }
    },
    computed: {
      subMenuClass() {
        return {
          treeview: true,
          active: this.$store.state.Menu.currentMenus.includes(this.label)
        }
      }
    },
    methods: {
      click() {
        //判断逻辑是折叠还是展开
        let isActivated = this.$store.state.Menu.currentMenus.includes(this.label);
        //判断是否处在顶层菜单，如果是则清除所有的菜单
        if (!this.$parent.label) this.$store.commit(CLEAR_CURRENT_MENUS);
        //判断点击逻辑是否为收缩菜单，如果是则缩起
        if(isActivated) {
          this.$store.commit(REMOVE_CURRENT_MENU, this.label);
        } else {
          this.$store.commit(ADD_CURRENT_MENU, this.label);
        }
      }
    }
  }
</script>



// WEBPACK FOOTER //
// SubMenu.vue?d7b3ad1e
